<template>
  <div class="mod-config">
    <el-form :inline="true" ref="ordersearchform" @keyup.enter.native="getDataorderList()">
      <el-row>
        <el-form-item class="el-col-6" prop="id" label="订单编号">
          <el-input v-model="dataForm.id" placeholder="订单编号" clearable></el-input>
        </el-form-item>
        <el-form-item class="el-col-6" prop="status" label="订单状态">
          <el-select v-model="dataForm.status" placeholder="订单状态">
            <el-option id="0" label="请选择" value="0" aria-selected="true" ></el-option>
            <el-option label="未分配" value="1"></el-option>
            <el-option label="待取件" value="2"></el-option>
            <el-option label="已揽收" value="3"></el-option>
            <el-option label="已完成" value="4"></el-option>
            <el-option label="已取消" value="5"></el-option>
<!--
              <el-option label="待取件" value="1"></el-option>
              <el-option label="已取件" value="2"></el-option>
              <el-option label="网点入库" value="3"></el-option>
              <el-option label="待装车" value="4"></el-option>
              <el-option label="运输中" value="5"></el-option>
              <el-option label="网点出库" value="6"></el-option>
              <el-option label="待派送" value="7"></el-option>
              <el-option label="派送中" value="8"></el-option>
              <el-option label="已签收" value="9"></el-option>
              <el-option label="拒收" value="10"></el-option>
              <el-option label="已取消" value="11"></el-option>
              <el-option label="全部" value="12"></el-option>
-->
          </el-select>
        </el-form-item>
        <el-form-item class="el-col-9" prop="paymentStatus" label="付款状态">
          <el-select v-model="dataForm.paymentStatus" placeholder="付款状态">
            <el-option id="status" label="请选择" value="0" aria-selected="true" ></el-option>
            <el-option label="已付" value="1"></el-option>
            <el-option label="未付" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item class="el-col-6" prop="sendername" label="发件人姓名">
          <el-input v-model="dataForm.sendername" placeholder="发件人姓名" clearable></el-input>
        </el-form-item>
        <el-form-item class="el-col-6" prop="senderphone" label="发件人电话">
          <el-input v-model="dataForm.senderphone" placeholder="发件人电话" clearable></el-input>
        </el-form-item>
        <el-form-item class="el-col-9" prop="senderaddress" label="发件人地址">
          <select v-model="sshen" name="" id="ssheng" placeholder="请选择">
            <option value="">---请选择---</option>
          </select>
          <select v-model="sshi" name="" id="sshi" placeholder="请选择">
            <option value="">---请选择---</option>
          </select>
          <select v-model="squ" name="" id="squ" placeholder="请选择">
            <option value="">---请选择---</option>
          </select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item class="el-col-6" prop="receivername" label="收件人姓名">
          <el-input v-model="dataForm.receivername" placeholder="收件人姓名" clearable></el-input>
        </el-form-item>
        <el-form-item class="el-col-6" prop="receiverphone" label="收件人电话">
          <el-input v-model="dataForm.receiverphone" placeholder="收件人电话" clearable></el-input>
        </el-form-item>
        <el-form-item class="el-col-9" prop="receiveraddress" label="收件人地址">
          <select v-model="rshen" name="" id="rsheng" placeholder="请选择">
            <option value="">---请选择---</option>
          </select>
          <select v-model="rshi" name="" id="rshi" placeholder="请选择">
            <option value="">---请选择---</option>
          </select>
          <select v-model="rqu" name="" id="rqu" placeholder="请选择">
            <option value="">---请选择---</option>
          </select>
        </el-form-item>
      </el-row>
      <el-form-item>
        <el-button class="el-button--primary" @click="getDataorderList()">查询</el-button>
        <el-button class="el-button--warning" @click="orderresetdateform('ordersearchform')">重置</el-button>
        <el-button class="el-button--success" @click="addorder()">下单</el-button>
      </el-form-item>
    </el-form>


    <el-table
      :data="dataorderList"
      border
      v-loading="dataorderListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="订单编号">
      </el-table-column>
      <el-table-column
        prop="transportorderid"
        header-align="center"
        align="center"
        label="运单编号">
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="下单时间">
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="订单状态">
        <tmplate slot-scope="scope">
          <span>{{
              scope.row.status == 1 ? '未分配' : scope.row.status == 2 ? '待取件' : scope.row.status == 3 ? '已揽收' : scope.row.status == 4 ? '已完成' : '已取消'
            }}</span>
        </tmplate>
      </el-table-column>
      <el-table-column
        prop="receiverName"
        header-align="center"
        align="center"
        label="发件人姓名">
      </el-table-column>
      <el-table-column
        prop="receiverPhone"
        header-align="center"
        align="center"
        label="发件人电话">
      </el-table-column>
      <el-table-column
        prop="senderAddress"
        header-align="center"
        align="center"
        label="发件人地址">
      </el-table-column>
      <el-table-column
        prop="receiverName"
        header-align="center"
        align="center"
        label="收件人姓名">
      </el-table-column>
      <el-table-column
        prop="receiverPhone"
        header-align="center"
        align="center"
        label="收件人电话">
      </el-table-column>
      <el-table-column
        prop="receiverAddress"
        header-align="center"
        align="center"
        label="收件人地址">
      </el-table-column>
      <el-table-column
        prop="pickupType"
        header-align="center"
        align="center"
        label="取件类型">
        <tmplate slot-scope="scope">
          <span>{{ scope.row.schedulingStatus == 1 ? '网点自寄' : '上门取件' }}</span>
        </tmplate>
      </el-table-column>
      <el-table-column
        prop="paymentMethod"
        header-align="center"
        align="center"
        label="付费类型">
        <tmplate slot-scope="scope">
          <span>{{ scope.row.schedulingStatus == 1 ? '预结' : '到付' }}</span>
        </tmplate>
      </el-table-column>
      <el-table-column
        prop="paymentStatus"
        header-align="center"
        align="center"
        label="付费状态">
        <tmplate slot-scope="scope">
          <span>{{ scope.row.schedulingStatus == 1 ? '未付' : '已付' }}</span>
        </tmplate>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="getorderdetails(scope.row.id)">查看详情</el-button>
          <el-button type="text" v-if="scope.row.status == 2" size="small" @click="dopickup(scope.row.id)">完成取件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!--  查看详情模态框  -->
    <el-dialog custom-class="detailcustomwidth" title="运单详情" width="800" :close-on-click-modal="false" :visible.sync="orderdetailVisible">
      <el-form ref="detailform">
        <br>
        <el-card>
          <el-row>
            <el-form-item style="font-weight: bold" class="el-col-8" prop="id" label="订单编号：">
              <span style="color: gray;font-weight: normal" id="id" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" class="el-col-8" prop="transportorderid" label="运单编号：">
              <span style="color: gray;font-weight: normal" id="transportorderid" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="createTime" class="el-col-8" label="下单时间：">
              <span style="color: gray;font-weight: normal" id="createTime" ></span>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item style="font-weight: bold" prop="dstatus" class="el-col-8" label="订单状态：">
              <span style="color: gray;font-weight: normal" id="dstatus" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="estimatedArrivalTime" class="el-col-8" label="预计到达日期：">
              <span style="color: gray;font-weight: normal" id="estimatedArrivalTime" ></span>
            </el-form-item>
          </el-row>
        </el-card>
        <br>
        <el-card>
          <div class="el-card__header" style="background-color: GhostWhite  ;">
            <div class="clearfix" style="background-color: GhostWhite  ;">
              <h3>基本信息</h3>
            </div>
          </div>
          <el-timeline><!--  icon="el-icon-map-location"    icon="el-icon-aim" -->
            <el-timeline-item timestamp="发货方" placement="top">
              <el-card>
                <el-form-item style="font-weight: bold" prop="senderName" class="el-col-11" label="发货方姓名：">
                  <span style="color: gray;font-weight: normal" id="senderName" ></span>
                </el-form-item>
                <el-form-item style="font-weight: bold" prop="senderssqaddress" class="el-col-11" label="发货方地址：">
                  <span style="color: gray;font-weight: normal" id="senderssqaddress" ></span>
                </el-form-item>
                <el-form-item style="font-weight: bold" prop="senderPhone" class="el-col-11" label="发货方电话：">
                  <span style="color: gray;font-weight: normal" id="senderPhone" ></span>
                </el-form-item>
                <el-form-item style="font-weight: bold" prop="senderAddress" class="el-col-11" label="详细地址：">
                  <span style="color: gray;font-weight: normal" id="senderAddress" ></span>
                </el-form-item>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="收货方" placement="top">
              <el-card>
                <el-form-item style="font-weight: bold" prop="receiverName" class="el-col-11" label="发货方姓名：">
                  <span style="color: gray;font-weight: normal" id="receiverName" ></span>
                </el-form-item>
                <el-form-item style="font-weight: bold" prop="receiverssqaddress" class="el-col-11" label="发货方地址：">
                  <span style="color: gray;font-weight: normal" id="receiverssqaddress" ></span>
                </el-form-item>
                <el-form-item style="font-weight: bold" prop="receiverPhone" class="el-col-11" label="发货方电话：">
                  <span style="color: gray;font-weight: normal" id="receiverPhone" ></span>
                </el-form-item>
                <el-form-item style="font-weight: bold" prop="receiverAddress" class="el-col-11" label="详细地址：">
                  <span style="color: gray;font-weight: normal" id="receiverAddress" ></span>
                </el-form-item>
              </el-card>
              <el-row>
                <el-form-item style="font-weight: bold" prop="distance" align="left" class="el-col-8" label="距离：">
                  <span style="color: gray;font-weight: normal" id="distance" ></span>
                </el-form-item>
                <el-form-item style="font-weight: bold" prop="senderaddress" class="el-col-8" label="地图：">
                  <span><a href="#">查看地图</a></span>
                </el-form-item>
              </el-row>
            </el-timeline-item>
          </el-timeline>
        </el-card>
        <br>
        <el-card>
          <div class="el-card__header" style="background-color: GhostWhite  ;">
            <div class="clearfix" style="background-color: GhostWhite  ;">
              <h3>费用信息</h3>
            </div>
          </div>
          <el-row>
            <el-form-item style="font-weight: bold" prop="amount" class="el-col-5" label="运费：">
              <span style="color: gray;font-weight: normal" id="amount" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="paymentMethod" class="el-col-5" label="支付方式：">
              <span style="color: gray;font-weight: normal" id="paymentMethod" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="paymentStatus" class="el-col-5" label="支付状态；">
              <span style="color: gray;font-weight: normal" id="paymentStatus" ></span>
            </el-form-item>
          </el-row>
        </el-card>
        <br>
        <el-card>
          <div class="el-card__header" style="background-color: GhostWhite  ;">
            <div class="clearfix" style="background-color: GhostWhite  ;">
              <h3>货品信息</h3>
            </div>
          </div>
          <el-table
            :data="dataorderdetailsList"
            border
            v-loading="dataorderdetailsListLoading"
            style="width: 100%;color: black">
            <el-table-column
              prop="name"
              header-align="center"
              align="center"
              label="货品名称">
            </el-table-column>
            <el-table-column
              prop="quantity"
              header-align="center"
              align="center"
              label="货品数量">
            </el-table-column>
            <el-table-column
              prop="unit"
              header-align="center"
              align="center"
              label="货品单位">
            </el-table-column>
            <el-table-column
              prop="goodtype"
              header-align="center"
              align="center"
              label="货品类型">
              <tmplate slot-scope="scope">
                <span>{{ scope.row.status == 1 ? '待取件' : scope.row.status == 2 ? '已取件' : '' }}</span>
              </tmplate>
            </el-table-column>
            <el-table-column
              prop="weight"
              header-align="center"
              align="center"
              label="重量（千克）">
            </el-table-column>
            <el-table-column
              prop="volume"
              header-align="center"
              align="center"
              label="体积（方）">
            </el-table-column>
            <el-table-column
              prop="cargoValue"
              header-align="center"
              align="center"
              label="货值（元）">
            </el-table-column>
            <el-table-column
              prop="cargoBarcode"
              header-align="center"
              align="center"
              label="条形编码">
            </el-table-column>
            <el-table-column
              prop="remark"
              header-align="center"
              align="center"
              label="备注">
            </el-table-column>
          </el-table>
        </el-card>
        <br>
        <el-card>
          <div class="el-card__header" style="background-color: GhostWhite  ;">
            <div class="clearfix" style="background-color: GhostWhite  ;">
              <h3>取件信息</h3>
            </div>
          </div>
          <el-row>
            <el-form-item style="font-weight: bold" prop="qagencyId" class="el-col-6" label="所在网点:">
              <span style="color: gray;font-weight: normal" id="qagencyId" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="taskType" class="el-col-6" label="取件类型:">
              <span style="color: gray;font-weight: normal" id="taskType" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="qsstatus" class="el-col-6" label="作业状态:">
              <span style="color: gray;font-weight: normal" id="qstatus" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="qcourier" class="el-col-6" label="取件快递员:">
              <span style="color: gray;font-weight: normal" id="qcourier" ></span>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item style="font-weight: bold" prop="qcphone" class="el-col-6" label="快递员电话：">
              <span style="color: gray;font-weight: normal" id="qcphone" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="qestimatedStartTime" class="el-col-6" label="预计取件时间：">
              <span style="color: gray;font-weight: normal" id="qestimatedStartTime" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="qconfirmTime" class="el-col-6" label="取件完成时间：">
              <span style="color: gray;font-weight: normal" id="qconfirmTime" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="actualEndTime" class="el-col-6" label="实际完成时间：">
              <span style="color: gray;font-weight: normal" id="actualEndTime" ></span>
            </el-form-item>
          </el-row>
        </el-card>
        <el-card>
          <div class="el-card__header" style="background-color: GhostWhite  ;">
            <div class="clearfix" style="background-color: GhostWhite  ;">
              <h3>派送信息</h3>
            </div>
          </div>
          <el-row>
            <el-form-item style="font-weight: bold" prop="pagencyId" class="el-col-6" label="所在网点：">
              <span style="color: gray;font-weight: normal" id="pagencyId" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="pstatus" class="el-col-6" label="作业状态：">
              <span style="color: gray;font-weight: normal" id="pstatus" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="pcourier" class="el-col-6" label="派件快递员：">
              <span style="color: gray;font-weight: normal" id="pcourier" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="pcphone" class="el-col-6" label="快递员电话：">
              <span style="color: gray;font-weight: normal" id="pcphone" ></span>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item style="font-weight: bold" prop="pestimatedStartTime" class="el-col-6" label="预计派送时间：">
              <span style="color: gray;font-weight: normal" id="pestimatedStartTime" ></span>
            </el-form-item>
            <el-form-item style="font-weight: bold" prop="pconfirmTime" class="el-col-7" label="派件完成时间：">
              <span style="color: gray;font-weight: normal" id="pconfirmTime" ></span>
            </el-form-item>
          </el-row>
        </el-card>
        <br>
        <el-card>
          <div class="el-card__header" style="background-color: GhostWhite  ;">
            <div class="clearfix" style="background-color: GhostWhite  ;">
              <h3>运输信息</h3>
            </div>
          </div>
        </el-card>
        <br>
        <el-card>
          <div class="el-card__header" style="background-color: GhostWhite  ;">
            <div class="clearfix" style="background-color: GhostWhite  ;">
              <h3>订单轨迹</h3>
            </div>
            <baidu-map :center="center"
                       :zoom="zoom"
                       style="height:600px"
                       scroll-wheel-zoom="scroll-wheel-zoom">
              <!--距离尺-->
              <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
              <!--        地图转换-->
              <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>

              <!--        标记点  -->
              <bm-marker :position="center" animation="BMAP_ANIMATION_BOUNCE">
                <bm-label :content="content" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -35, height: 30}"/>
              </bm-marker>

            </baidu-map>
          </div>
        </el-card>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="orderdetailVisible = false">取消</el-button>
      </div>
    </el-dialog>


    <!--  添加模态框  -->
    <el-dialog custom-class="customwidth" title="下单" :close-on-click-modal="close" :visible.sync="addordervisible">
      <el-form :rules="dataRule" ref="adddataForm" @keyup.enter.native="addorderdataFormSubmit()" label-width="100px">
        <el-row>
        <el-form-item class="el-col-11" label="取件类型" prop="pickupType">
          <select v-model="adddataForm.pickupType" name="" placeholder="请选择">
          <option value="" selected>---请选择---</option>
          <option value="1">网点自寄</option>
          <option value="2">上门取件</option>
          </select>
        </el-form-item>
        </el-row>
        <el-tabs type="border-card">
          <h3>发件人信息</h3>
          <el-row>
            <el-form-item class="el-col-11" label="发件人姓名" prop="senderName">
              <el-input v-model="adddataForm.senderName" placeholder="发件人姓名"></el-input>
            </el-form-item>
            <el-form-item class="el-col-11 el-col-lg-offset-1" label="发件人电话" prop="senderPhone">
              <el-input v-model="adddataForm.senderPhone" placeholder="发件人电话"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item class="el-col-7" ref="asshen" label="发件人省份" prop="senderProvinceId">
              <select v-model="asshen" name="" id="asshen" placeholder="请选择">
                <option value="">---请选择---</option>
              </select>
            </el-form-item>
            <el-form-item class="el-col-7 el-col-lg-offset-1" ref="asshi" label="发件人城市" prop="senderCityId">
              <select v-model="asshi" name="" id="asshi" placeholder="请选择">
                <option value="">---请选择---</option>
              </select>
            </el-form-item>
            <el-form-item class="el-col-7 el-col-lg-offset-1" ref="asqu" label="发件人区县" prop="senderCountyId">
              <select v-model="asqu" name="" id="asqu" placeholder="请选择">
                <option value="">---请选择---</option>
              </select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label-width="120px" class="el-col-11" label="发件人详细地址" prop="senderAddress">
              <el-input v-model="adddataForm.senderAddress" placeholder="发件人详细地址"></el-input>
            </el-form-item>
          </el-row>
        </el-tabs>
        <el-tabs type="border-card">
          <h3>收件人信息</h3>
          <el-row>
            <el-form-item class="el-col-11" label="收件人姓名" prop="receiverName">
              <el-input v-model="adddataForm.receiverName" placeholder="收件人姓名"></el-input>
            </el-form-item>
            <el-form-item class="el-col-11 el-col-lg-offset-1" label="收件人电话" prop="receiverPhone">
              <el-input v-model="adddataForm.receiverPhone" placeholder="收件人电话"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item class="el-col-7" ref="arshen" label="收件人省份" prop="receiverProvinceId">
              <select v-model="arshen" name="" id="arshen" placeholder="请选择">
                <option value="">---请选择---</option>
              </select>
            </el-form-item>
            <el-form-item class="el-col-7 el-col-lg-offset-1" ref="arshi" label="收件人城市" prop="receiverCityId">
              <select v-model="arshi" name="" id="arshi" placeholder="请选择">
                <option value="">---请选择---</option>
              </select>
            </el-form-item>
            <el-form-item class="el-col-7 el-col-lg-offset-1" ref="arqu" label="收件人区县" prop="receiverCountyId">
              <select v-model="arqu" name="" id="arqu" placeholder="请选择">
                <option value="">---请选择---</option>
              </select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label-width="120px" class="el-col-11" label="收件人详细地址" prop="receiverAddress">
              <el-input v-model="adddataForm.receiverAddress" placeholder="收件人详细地址"></el-input>
            </el-form-item>
          </el-row>
        </el-tabs><br>
        <el-row>
        <el-form-item class="el-col-7" label="货物类型" prop="goodsTypeId">
          <el-select v-model="adddataForm.goodsTypeId" placeholder="货物类型">
            <el-option id="ustatus" label="请选择" value="0" aria-selected="true" ></el-option>
            <el-option
              v-for="item in glist"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item class="el-col-7 el-col-lg-offset-1" label="货物名称" prop="goodsName">
            <el-input v-model="adddataForm.goodsName" placeholder="货物名称"></el-input>
          </el-form-item>
          <el-form-item class="el-col-7 el-col-lg-offset-1" label="货品总重量" prop="totalWeight">
            <el-input v-model="adddataForm.totalWeight" placeholder="货品总重量"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" @click="addorderdataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<style>
.customwidth{
  width: 80%;
}
.detailcustomwidth{
  width: 100%;
}

</style>

<script src="src/element-ui/jquery.min.js"></script>
<script>

import {addorder, getgoodtype, getorderdetail, getorderinfo, pickupover} from '../../../api/order'
import {getaddress} from '../../../api/base'

export default {
  data() {
    return {
      dataForm: {
        id: '',
        status: '',
        paymentStatus: '',
        sendername: '',
        senderphone: '',
        senderaddress: '',
        receivername: '',
        receiverphone: '',
        receiveraddress: ''
      },
      dataorderList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: null,
      dataorderListLoading: false,
      dataorderListSelections: [],
      makecourierVisible: false,
      item: {
        type: '',
        lable: ''
      },
      sshen: '',
      sshi: '',
      squ: '',
      rshen: '',
      rshi: '',
      rqu: '',
      arshen: '',
      arshi: '',
      arqu: '',
      asshen: '',
      asshi: '',
      asqu: '',
      orderdetailVisible:false,
      dataorderdetailsList: [],
      dataorderdetailsListLoading: false,
      addordervisible: false,
      adddataForm:{
        orderType: '',
        pickupType: '',
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        receiverAddress: '',
        receiverName: '',
        receiverPhone: '',
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        senderAddress: '',
        senderName: '',
        senderPhone: '',
        goodsTypeId: '',
        goodsName: '',
        totalWeight: '',
      },
      dataRule: {
        orderType: [
          {required: true, message: '订单类型不能为空', trigger: 'blur'}
        ],
        pickupType: [
          {required: true, message: '取件类型不能为空', trigger: 'blur'}
        ],
        receiverProvinceId: [
          {required: true, message: '收件人省份不能为空', trigger: 'blur'}
        ],
        receiverCityId: [
          {required: true, message: '收件人城市不能为空', trigger: 'blur'}
        ],
        receiverCountyId: [
          {required: true, message: '收件人区县不能为空', trigger: 'blur'}
        ],
        receiverAddress: [
          {required: true, message: '收件人详细地址不能为空', trigger: 'blur'}
        ],
        receiverName: [
          {required: true, message: '收件人姓名不能为空', trigger: 'blur'}
        ],
        receiverPhone: [
          {required: true, message: '收件人电话不能为空', trigger: 'blur'}
        ],
        senderProvinceId: [
          {required: true, message: '发件人省份经度不能为空', trigger: 'blur'}
        ],
        senderCityId: [
          {required: true, message: '发件人城市不能为空', trigger: 'blur'}
        ],
        senderCountyId: [
          {required: true, message: '发件人区县不能为空', trigger: 'blur'}
        ],
        senderAddress: [
          {required: true, message: '发件人详细地址不能为空', trigger: 'blur'}
        ],
        senderName: [
          {required: true, message: '发件人姓名不能为空', trigger: 'blur'}
        ],
        senderPhone: [
          {required: true, message: '发件人电话不能为空', trigger: 'blur'}
        ],
        goodsTypeId: [
          {required: true, message: '货物类型不能为空', trigger: 'blur'}
        ],
        goodsName: [
          {required: true, message: '货物名称不能为空', trigger: 'blur'}
        ],
        totalWeight: [
          {required: true, message: '货品总重量不能为空', trigger: 'blur'}
        ]
      },
      glist: [],

      center: {lng: 104.052642, lat:30.587787},
      zoom: 5,
      //覆盖范围半径 分公司为80000  一级转运中心为40000   二级转运中心为20000 网点为5000
      content:"品达物流集团有限公司",

    }
  },
  mounted() {
    this.getsprovince();
    this.getrprovince();
    this.getDataorderList();
  },
  watch: {
    sshen: { //监听当前地区值的变化，于与上方地区值进行了双向绑定
      deep:true,  //深度监听
      handler () {
        this.getscitybyprovince();
      }
    },
    sshi: {
      deep:true,  //深度监听
      handler () {
        this.getsareabycity();
      }
    },
    arshen: { //监听当前地区值的变化，于与上方地区值进行了双向绑定
      deep:true,  //深度监听
      handler () {
        this.getarcitybyprovince();
      }
    },
    arshi: {
      deep:true,  //深度监听
      handler () {
        this.getarareabycity();
      }
    },
    asshen: { //监听当前地区值的变化，于与上方地区值进行了双向绑定
      deep:true,  //深度监听
      handler () {
        this.getascitybyprovince();
      }
    },
    asshi: {
      deep:true,  //深度监听
      handler () {
        this.getasareabycity();
      }
    },
    rshen: { //监听当前地区值的变化，于与上方地区值进行了双向绑定
      deep:true,  //深度监听
      handler () {
        this.getrcitybyprovince();
      }
    },
    rshi: {
      deep:true,  //深度监听
      handler () {
        this.getrareabycity();
      }
    }
  },
  methods: {
    getsprovince(){
      getaddress(0).then(res => {
        var frag = document.createDocumentFragment();
        let province= res.data.address;
        for (let i = 0; i < province.length; i++) {
          var option = document.createElement("option");
          option.innerHTML = province[i].name;
          option.value = province[i].id;
          frag.appendChild(option);
        }
        document.getElementById("ssheng").appendChild(frag);
      }).catch(error => {
        console.log(error);
      });
    },
    getrprovince(){
      getaddress(0).then(res => {
        var frag = document.createDocumentFragment();
        let province= res.data.address;
        for (let i = 0; i < province.length; i++) {
          var option = document.createElement("option");
          option.innerHTML = province[i].name;
          option.value = province[i].id;
          frag.appendChild(option);
        }
        document.getElementById("rsheng").appendChild(frag);
      }).catch(error => {
        console.log(error);
      });
    },
    getarprovince(){
      getaddress(0).then(res => {
        var frag = document.createDocumentFragment();
        let province= res.data.address;
        for (let i = 0; i < province.length; i++) {
          var option = document.createElement("option");
          option.innerText = province[i].name;
          option.value = province[i].id;
          option.name = province[i].name;
          frag.appendChild(option);
        }
        document.getElementById("arshen").appendChild(frag);
      }).catch(error => {
        console.log(error);
      });
    },
    getasprovince(){
      getaddress(0).then(res => {
        var frag = document.createDocumentFragment();
        let province= res.data.address;
        for (let i = 0; i < province.length; i++) {
          var option = document.createElement("option");
          option.innerText = province[i].name;
          option.value = province[i].id;
          option.name = province[i].name;
          frag.appendChild(option);
        }
        document.getElementById("asshen").appendChild(frag);
      }).catch(error => {
        console.log(error);
      });
    },
    getscitybyprovince () {
      document.getElementById("sshi").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("squ").innerHTML="<option value=\"\">---请选择---</option>";
      //获取当前省份值id，获取该省份下城市
      getaddress(this.sshen).then(res => {
        var frag = document.createDocumentFragment();
        let city= res.data.address;
        for (let i = 0; i < city.length; i++) {
          var option = document.createElement("option");
          option.innerHTML = city[i].name;
          option.value = city[i].id;
          frag.appendChild(option);
        }
        document.getElementById("sshi").appendChild(frag);
        this.cityaddr = data.address;
      })
        .catch(error => {
          console.log(error);
        });
    },
    getrcitybyprovince () {
      document.getElementById("rshi").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("rqu").innerHTML="<option value=\"\">---请选择---</option>";
      //获取当前省份值id，获取该省份下城市
      getaddress(this.rshen).then(res => {
        var frag = document.createDocumentFragment();
        let city= res.data.address;
        for (let i = 0; i < city.length; i++) {
          var option = document.createElement("option");
          option.innerHTML = city[i].name;
          option.value = city[i].id;
          frag.appendChild(option);
        }
        document.getElementById("rshi").appendChild(frag);
        this.cityaddr = data.address;
      })
        .catch(error => {
          console.log(error);
        });
    },
    getarcitybyprovince () {
      document.getElementById("arshi").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("arqu").innerHTML="<option value=\"\">---请选择---</option>";
      //获取当前省份值id，获取该省份下城市
      getaddress(this.arshen).then(res => {
        var frag = document.createDocumentFragment();
        let city= res.data.address;
        for (let i = 0; i < city.length; i++) {
          var option = document.createElement("option");
          option.innerText = city[i].name;
          option.value = city[i].id;
          option.name = city[i].name;
          frag.appendChild(option);
        }
        document.getElementById("arshi").appendChild(frag);
        this.cityaddr = data.address;
      })
        .catch(error => {
          console.log(error);
        });
    },
    getascitybyprovince () {
      document.getElementById("asshi").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("asqu").innerHTML="<option value=\"\">---请选择---</option>";
      //获取当前省份值id，获取该省份下城市
      getaddress(this.asshen).then(res => {
        var frag = document.createDocumentFragment();
        let city= res.data.address;
        for (let i = 0; i < city.length; i++) {
          var option = document.createElement("option");
          option.innerText = city[i].name;
          option.value = city[i].id;
          option.name = city[i].name;
          frag.appendChild(option);
        }
        document.getElementById("asshi").appendChild(frag);
        this.cityaddr = data.address;
      })
        .catch(error => {
          console.log(error);
        });
    },
    getsareabycity () {
      document.getElementById("squ").innerHTML="<option value=\"\">---请选择---</option>";
      //获取当前城市值id，获取该城市下区域
      getaddress(this.sshi).then(res => {
        var frag = document.createDocumentFragment();
        let area= res.data.address;
        for (let i = 0; i < area.length; i++) {
          var option = document.createElement("option");
          option.innerHTML = area[i].name;
          option.value = area[i].id;
          frag.appendChild(option);
        }
        document.getElementById("squ").appendChild(frag);
        this.cityaddr = data.address;
      })
        .catch(error => {
          console.log(error);
        });
    },
    getrareabycity () {
      document.getElementById("rqu").innerHTML="<option value=\"\">---请选择---</option>";
      //获取当前城市值id，获取该城市下区域
      getaddress(this.rshi).then(res => {
        var frag = document.createDocumentFragment();
        let area= res.data.address;
        for (let i = 0; i < area.length; i++) {
          var option = document.createElement("option");
          option.innerHTML = area[i].name;
          option.value = area[i].id;
          frag.appendChild(option);
        }
        document.getElementById("rqu").appendChild(frag);
        this.cityaddr = data.address;
      })
        .catch(error => {
          console.log(error);
        });
    },
    getarareabycity () {
      document.getElementById("arqu").innerHTML="<option value=\"\">---请选择---</option>";
      //获取当前城市值id，获取该城市下区域
      getaddress(this.arshi).then(res => {
        var frag = document.createDocumentFragment();
        let area= res.data.address;
        for (let i = 0; i < area.length; i++) {
          var option = document.createElement("option");
          option.innerText = area[i].name;
          option.value = area[i].id;
          option.name = area[i].name;
          frag.appendChild(option);
        }
        document.getElementById("arqu").appendChild(frag);
        this.cityaddr = data.address;
      })
        .catch(error => {
          console.log(error);
        });
    },
    getasareabycity () {
      document.getElementById("asqu").innerHTML="<option value=\"\">---请选择---</option>";
      //获取当前城市值id，获取该城市下区域
      getaddress(this.asshi).then(res => {
        var frag = document.createDocumentFragment();
        let area= res.data.address;
        for (let i = 0; i < area.length; i++) {
          var option = document.createElement("option");
          option.innerText = area[i].name;
          option.value = area[i].id;
          option.name = area[i].name;
          frag.appendChild(option);
        }
        document.getElementById("asqu").appendChild(frag);
        this.cityaddr = data.address;
      })
        .catch(error => {
          console.log(error);
        });
    },
    orderresetdateform() {
      this.sshen="";
      this.rshen="";
      this.sshi="";
      this.rshi="";
      this.squ="";
      this.rqu="";
      document.getElementById("ssheng").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("rsheng").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("sshi").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("squ").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("rshi").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("rqu").innerHTML="<option value=\"\">---请选择---</option>";
      this.getsprovince();
      this.getrprovince();
      this.$refs['ordersearchform'].resetFields();
      this.getDataorderList();
    },
    // 获取数据列表
    getDataorderList() {
      this.dataorderListLoading = true
      let params = {
        'pageno': this.pageIndex,
        'pagesize': this.pageSize,
        'id': this.dataForm.id,
        'status': this.dataForm.status,
        'paymentStatus': this.dataForm.paymentStatus,
        'sendername': this.dataForm.sendername,
        'senderphone': this.dataForm.senderphone,
        'senderaddress': this.sshen+","+this.sshi+","+this.squ,
        'receivername': this.dataForm.receivername,
        'receiverphone': this.dataForm.receiverphone,
        'receiveraddress': this.rshen+","+this.rshi+","+this.rqu,
      }

      getorderinfo(params).then(({data}) => {
        if (data && data.code == 0) {
          this.dataorderList = data.page.rows
          this.totalPage = data.page.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
        this.dataorderListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataorderList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataorderList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataorderListSelections = val
    },
    getorderdetails(oid) {
      this.orderdetailVisible = true;
      getorderdetail(oid).then(({data}) => {
        console.log(data)
        console.log(data.ordercargo)
        console.log(data.order)
        console.log(data.taskpd)
        this.dataorderdetailsList = data.ordercargo;
        document.getElementById("id").innerHTML = data.order.id;
        document.getElementById("transportorderid").innerHTML = data.order.transportorderid;
        document.getElementById("createTime").innerHTML = data.order.createTime;
        document.getElementById("dstatus").innerHTML = data.order.status == 1 ? '待取件' :  data.order.status == 2 ? '已取件' : data.order.status == 3 ? '网点入库' : data.order.status == 4 ? '待装车' : data.order.status == 5 ? '运输中' : data.order.status == 6 ? '网点出库' : data.order.status == 7 ? '待派送' : data.order.status == 8 ? '派送中' : data.order.status == 9 ? '已签收' : data.order.status == 10 ? '拒收' : data.order.status == 11 ? '已取消' : '全部';
        document.getElementById("estimatedArrivalTime").innerHTML = data.order.estimatedArrivalTime;
        document.getElementById("senderName").innerHTML = data.order.senderName;
        document.getElementById("senderssqaddress").innerHTML = data.order.senderssqaddress;
        document.getElementById("senderPhone").innerHTML = data.order.senderPhone;
        document.getElementById("senderAddress").innerHTML = data.order.senderAddress;
        document.getElementById("receiverName").innerHTML = data.order.receiverName;
        document.getElementById("receiverssqaddress").innerHTML = data.order.receiverssqaddress;
        document.getElementById("receiverPhone").innerHTML = data.order.receiverPhone;
        document.getElementById("receiverAddress").innerHTML = data.order.receiverAddress;
        document.getElementById("distance").innerHTML = data.order.distance;
        document.getElementById("amount").innerHTML = data.order.amount;
        document.getElementById("paymentMethod").innerHTML = data.order.paymentMethod==1?"预付":"到付";
        document.getElementById("paymentStatus").innerHTML = data.order.paymentStatus==1?"未付":"已付";
        document.getElementById("qagencyId").innerHTML = data.taskpd.agencyname;
        document.getElementById("taskType").innerHTML = data.taskpd.taskType==1?"取件任务":"派件任务";
        document.getElementById("qstatus").innerHTML = data.taskpd.status == 1 ? '待提货' : data.taskpd.status == 2 ? '在途中' : data.taskpd.status == 4 ? '已交付' : '已取消';
        document.getElementById("qcourier").innerHTML = data.taskpd.courier;
        document.getElementById("qcphone").innerHTML = data.taskpd.cphone;
        document.getElementById("qestimatedStartTime").innerHTML = data.taskpd.estimatedStartTime;
        document.getElementById("qconfirmTime").innerHTML = data.taskpd.confirmTime;
        document.getElementById("actualEndTime").innerHTML = data.taskpd.actualEndTime;
        document.getElementById("pagencyId").innerHTML = data.taskpd.agencyname;
        document.getElementById("pstatus").innerHTML = data.taskpd.status == 1 ? '待提货' : data.taskpd.status == 2 ? '在途中' : data.taskpd.status == 4 ? '已交付' : '已取消';
        document.getElementById("pcourier").innerHTML = data.taskpd.courier;
        document.getElementById("pcphone").innerHTML = data.taskpd.cphone;
        document.getElementById("pestimatedStartTime").innerHTML = data.taskpd.estimatedStartTime;
        document.getElementById("pconfirmTime").innerHTML = data.taskpd.confirmTime;
      })
    },

    close(){
      this.addordervisible = false;
      this.$refs['adddataForm'].resetFields();
      this.arshen = "";
      this.arshi = "";
      this.arqu = "";
      this.asshen = "";
      this.asshi = "";
      this.asqu = "";
      document.getElementById("asshen").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("arshen").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("asshi").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("asqu").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("arshi").innerHTML="<option value=\"\">---请选择---</option>";
      document.getElementById("arqu").innerHTML="<option value=\"\">---请选择---</option>";
    },

    addorder(){
      this.addordervisible = true;
      this.getarprovince();
      this.getasprovince();
      this.getgoodtypes();
    },
    addorderdataFormSubmit(){
      let params = {
        'orderType': this.adddataForm.orderType,
        'pickupType': this.adddataForm.pickupType,
        'memberId': this.adddataForm.memberId,
        'receiverProvinceId': this.arshen,
        'receiverCityId': this.arshi,
        'receiverCountyId': this.arqu,
        'receiverAddress': this.adddataForm.receiverAddress,
        'receiverName': this.adddataForm.receiverName,
        'receiverPhone': this.adddataForm.receiverPhone,
        'senderProvinceId': this.asshen,
        'senderCityId': this.asshi,
        'senderCountyId': this.asqu,
        'senderAddress': this.adddataForm.senderAddress,
        'senderName': this.adddataForm.senderName,
        'senderPhone': this.adddataForm.senderPhone,
        'amount': this.adddataForm.amount,
        'estimatedArrivalTime': this.adddataForm.estimatedArrivalTime,
        'status': this.adddataForm.status,
        'goodsTypeId': this.adddataForm.goodsTypeId,
        'goodsTypeName': this.adddataForm.goodsTypeName,
        'goodsName': this.adddataForm.goodsName,
        'totalWeight': this.adddataForm.totalWeight,
      }
      addorder(params).then(({data}) => {
        if (data && data.code == 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    getgoodtypes(){
      getgoodtype().then(({data}) => {
        this.glist = data;
      })
    },
    dopickup(id){
      pickupover(id).then(({data}) => {
        if (data && data.code == 0) {
          this.$message({
            message: '取件成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataorderList();
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },

  }
}

/*

*  */
</script>
